<template>
  <div class="carBox">
    <header>
      <i class="el-icon-arrow-left" @click="$router.go(-1)"></i>
      <div>购物车</div>
      <i></i>
    </header>
    <div class="tabbox">
      <el-table
        ref="multipleTable"
        :data="$store.state.car.carList"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        @select="change"
        @select-all="changeAll"
      >
        <el-table-column type="selection" width="55" prop="isCheck">
        </el-table-column>
        <el-table-column label="课程名" width="120" prop="title">
        </el-table-column>
        <el-table-column prop="prices" label="价格" width="120">
        </el-table-column>
        <el-table-column label="操作" prop="isCheck" show-overflow-tooltip>
          <template scope="scope">
            <el-button
              el-button
              type="danger"
              round
              size="mini"
              :disabled="scope.row.isCheck"
              @click="del(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="clear">
      <div class="btn">总价：{{ total }}</div>
      <div class="add" @click="add">结算</div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue';
import { Toast } from 'vant';
Vue.use(Toast);
import {addOrder} from '../../api/order'
export default {
  data() {
    return {
      multipleSelection: [],
    };
  },
  mounted() {
    // 默认是否选中
    this.$store.state.car.carList.forEach((ele, i) => {
      if (ele.isCheck == false) {
        this.toggleSelection([this.$store.state.car.carList[i]]);
      }
    });

  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    change(selection, row) {
      this.$store.commit("SET_CAR_ISCHECK", row.id);
    },
    changeAll(selection){
      if(selection.length==0){
        this.$store.commit("SET_CAR_ISCHECK_T");     
      }else{
          this.$store.commit("SET_CAR_ISCHECK_F");  
      }
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    del(id){
      console.log(id);
       this.$store.commit("DEL_CARLIST",id); 
    },
    add(){
      console.log(this.multipleSelection)
        if(this.multipleSelection.length == 0){
          Toast.success('选中商品下单');
        }else{
          addOrder(this.multipleSelection,this.$store.state.user.userid).then(res=>{
            Toast.success('下单完成');
            this.multipleSelection.forEach((ele)=>{
              this.$store.commit("DEL_CARLIST",ele.id);
            })
          })
        }
        
      
    }
  },
  computed: {
    total() {
      return this.multipleSelection.reduce(
        (pre, cur) => (pre += parseInt(cur.prices)),
        0
      );
    },
  },
};
</script>

<style scoped>
.carBox {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}
header {
  height: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0.22rem;
  box-sizing: border-box;
  background-color: #ffffff;
  margin-bottom: 0.2rem;
}

header i {
  flex: 1;
  font-size: 0.48rem;
}
header div {
  flex: 1;
  font-size: 0.32rem;
  font-weight: bold;
  text-align: center;
}
.tabbox {
  flex: 1;
  overflow: auto;
}
.clear {
  height: 1.04rem;
  display: flex;
  text-align: center;
  line-height: 1.04rem;
  font-size: 0.28rem;
}
.clear .btn {
  flex: 2;
  background-color: #ffffff;
  line-height: 1.04rem;
}

.add {
  flex: 1;
  background-color: #ea5235;
  color: #ffffff;
}
</style>
